<template>
  <view class="my-settle-container">
    <label class="radio">
      <radio color="#c00" :checked="isFullChrak" @click="changeAllState"/><text>全选</text>
    </label>
    
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">￥ {{checkedCountAmount}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="bth-settle" @click="settlement">
      结算({{checkedCount}})
    </view>
  </view>
</template>

<script>
  import { $http } from "@escook/request-miniprogram";
import {mapGetters,mapMutations,mapState} from "vuex"
  export default {
    name:"my-settle",
    data() {
      return {
        // 倒计时的描述
        seconds: 3,
        // 定时器的id
        timer: null
      };
    },
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedCountAmount']),
      ...mapGetters('m_user',['addstr']),
      ...mapState('m_user',['token']),
      ...mapState('m_cart',['cart']),
      //进行判断所有商品的数量和勾选商品的数量是否相等，判断是否全选
      isFullChrak(){
        return this.total===this.checkedCount
      }
    },
    methods:{
      ...mapMutations('m_cart',['updataAllGoodsState']),
      ...mapMutations('m_user',['updateRedirectInfo']),
      
      // 勾选全部
      changeAllState(){
        this.updataAllGoodsState(!this.isFullChrak)
      },
      // 用户点击结算按钮
      settlement(){
        if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品!')
        if(!this.addstr) return uni.$showMsg('请选择收获地址!')
        // if(!this.token) return uni.$showMsg('请先登录!')
        if(!this.token) return this.delayNavigate()
        
        // 登录成功进行订单的支付
        this.payOrder()
      },
      
      // 订单支付方法
      async payOrder(){
        //1.创建订单
          const orderInfo={
            order_price: 0.01,
            consignee_addr: this.addstr,
            goods: this.cart.filter(x=>x.goods_state).map(x=>({
              goods_id: x.goods_id,
              goods_number: x.goods_number,
              goods_price: x.goods_price
            }))
          }
          // 发起请求
          const {data:res}=await $http.post('/api/public/v1/my/orders/create',orderInfo)
          console.log(res);
          if(res.meta.status!==200) return uni.$showMsg('订单创建失败!')
          
          // 得到 响应的订单编号
          const orderNumber = res.mesage.order_number
          // const orderNumber = "GD20180507000000000110"
          console.log(orderNumber);
          
        // 2.订单预支付
        const {data: res2}= await $http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number: orderNumber})
        
        if(res2.meta.status!==200) return uni.$showMsg('订单预支付失败!')
        //得到订单预支付相关的必要参数
        const patInfo=res2.message.pay
        console.log(patInfo);
      
      // 3.发起微信支付
        const [err,succ]=await uni.requestPayment(patInfo)
        // 未完成支付
        if(err) return uni.$showMsg("订单未支付!")
        // 完成了支付,进一步查询结果
        const {data: res3} =await $http.post('/api/public/v1/my/orders/chkOrder',{order_number: orderNumber})
        // 检测到订单未支付
        if(res3.meta.status!==200) return uni.$showMsg("订单未支付!")
        // 检测到订单支付完成
        uni.showToast({
          title: "订单支付完成!",
          icon: 'success'
        })
      },
      
      // 延时导航到my界面
      delayNavigate(){
        // 进行重置倒计时
        this.seconds=3
        
        this.showTips(this.seconds)
        
        // 定义计时器
        this.timer = setInterval(()=>{
          this.seconds--
          
          if(this.seconds<=0){
            // 进行清除计时器
            clearInterval(this.timer)
            
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                this.updateRedirectInfo({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
          }
          this.showTips(this.seconds)
        },1000)
      },
      // 显示倒计时的提示信息
      showTips(n){
        uni.showToast({
          icon:'none',
          title:'请登录后在进行结算!'+ n+'秒后自动跳转到登录界面',
          // 防止点击穿透，防止用户点击到后面的值
          mask:true,
          duration:1500
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    .radio{
       display: flex;
    }
    
    .amount-box{
      .amount{
        color: #c00;
        font-weight: bold;
      }
    }
    
    .bth-settle{
      background-color: #c00;
      height: 50px;
      color: white;
      line-height: 50px;
      padding: 0 10px;
      min-width: 100px;
      text-align: center;
    }
  }
</style>